<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>Tencent 腾讯</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link href="https://www.tencent.com/favicon.ico" rel="icon">
    <link href="assets/app.css" rel="stylesheet">
</head>
<body>
    <div id="app">
        <div class="container" v-cloak>
            <nav-bar></nav-bar>
            <header>
                <video
                    v-if="!staticBanner"
                    ref="bannerVideo"
                    class="banner-video"
                    autoplay
                    loop
                    muted
                    playsinline
                    src="https://www.tencent.com/video/index-video.mp4"
                    @playing="videoPlaying"
                >
                </video>
                <img v-else class="banner-video" :src="indexVideoImg" alt="连接你我">
                <div class="banner-text">
                    <div class="left-text">
                        <p>连接</p>
                        <div class="dynamic">
                            <transition
                                @enter="bannerTextEnter"
                                @leave="bannerTextLeave"
                            >
                                <i v-if="bannerTextIndex == 0" key="1">你我</i>
                                <i v-if="bannerTextIndex == 1" key="2">企业</i>
                                <i v-if="bannerTextIndex == 2" key="3">科技</i>
                                <i v-if="bannerTextIndex == 3" key="4">公益</i>
                            </transition>
                        </div>
                    </div>
                    <div>
                        <p>共生未来</p>
                    </div>
                </div>
                <div class="slide-tips">
                    <i class="slide-line"></i>
                    <span class="tips-text">滑动</span>
                </div>
            </header>
            <main>
                <div class="basic-info">
                    <p class="description">
                        腾讯是一家以互联网为基础的平台公司，<br>
                        通过技术丰富互联网用户的生活，<br class="break-line">助力企业数字化升级。<br>
                        我们的使命是“用户为本 科技向善”。
                    </p>
                    
                    <div class="details">
                        <ul class="details-list">
                            <li class="details-item">
                                <a href="#">
                                    <p>公司简介</p>
                                    <img src="https://www.tencent.com/data/index/index_detail_1.jpg" alt="公司简介">
                                </a>
                            </li>
                            <li class="details-item">
                                <a href="#">
                                    <p>企业文化</p>
                                    <img src="https://www.tencent.com/data/index/index_detail_2.jpg" alt="企业文化">
                                </a>
                            </li>
                            <li class="details-item">
                                <a href="#">
                                    <p>办公地点</p>
                                    <img src="https://www.tencent.com/data/index/index_detail_3.jpg" alt="办公地点">
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="link">
                    <div class="link-inner">
                        <!-- link 左边tab -->
                        <ul class="link-tab">
                            <li class="link-tab-item tab-item-1" :class="tabActiveClass(0)" @mouseenter="setActiveTab(0)">
                                <a href="#">
                                    <div class="inner" style="top: 60%">
                                        <div class="content">
                                            <h3>连接用户与生活</h3>
                                            <p>让生活更便捷更多彩</p>
                                        </div>
                                        <i></i>
                                    </div>
                                </a>
                            </li>
                            <li class="link-tab-item tab-item-2" :class="tabActiveClass(1)" @mouseenter="setActiveTab(1)">
                                <a href="#">
                                    <div class="inner">
                                        <div class="content">
                                            <h3>连接企业与科技</h3>
                                            <p>数字化助手，助力产业升级</p>
                                        </div>
                                        <i></i>
                                    </div>
                                </a>
                            </li>
                            <li class="link-tab-item tab-item-3" :class="tabActiveClass(2)" @mouseenter="setActiveTab(2)">
                                <a href="#">
                                    <div class="inner" style="top: 40%">
                                        <div class="content">
                                            <h3>连接现在与未来</h3>
                                            <p>探索面向未来的创新科技</p>
                                        </div>
                                        <i></i>
                                    </div>
                                </a>
                            </li>
                        </ul>
                        <!-- link 右边宫格 -->
                        <div class="link-content">
                            <transition @enter="linkContentEnter">
                                <ul v-show="linkActiveTab == 0" class="link-content-list">
                                    <li class="item-1-1">
                                        <a href="#">
                                            <div class="link-item-content">
                                                <h4>通讯与社交</h4>
                                                <p>连接人与人，提供功能丰富的即时通信和社交平台，让沟通更便捷。</p>
                                            </div>
                                            <i class="icon-more"></i>
                                        </a>
                                    </li>
                                    <li class="item-1-2">
                                        <a href="#">
                                            <div class="link-item-content">
                                                <h4>数字内容</h4>
                                                <p>基于优质内容，以技术为驱动引擎，探索社交和内容融合的下一代形态。</p>
                                            </div>
                                            <i class="icon-more"></i>
                                        </a>
                                    </li>
                                    <li class="item-1-3">
                                        <a href="#">
                                            <div class="link-item-content">
                                                <h4>金融科技服务</h4>
                                                <p>连接用户、商户和金融机构，提供安全、专业、便捷的金融产品与服务。</p>
                                            </div>
                                            <i class="icon-more"></i>
                                        </a>
                                    </li>
                                    <li class="item-1-4">
                                        <a href="#">
                                            <div class="link-item-content">
                                                <h4>工具</h4>
                                                <p>提供多种工具性软件，帮助用户快速直接解决各项具体需求。</p>
                                            </div>
                                            <i class="icon-more"></i>
                                        </a>
                                    </li>
                                </ul>
                            </transition>
                            <transition @enter="linkContentEnter">
                                <ul v-show="linkActiveTab == 1" class="link-content-list">
                                    <li class="item-2-1">
                                        <a href="#">
                                            <div class="link-item-content">
                                                <h4>腾讯广告营销</h4>
                                                <p>大数据营销平台，汇聚腾讯全量应用场景，提供一体化数字化营销方案。</p>
                                            </div>
                                            <i class="icon-more"></i>
                                        </a>
                                    </li>
                                    <li class="item-2-2">
                                        <a href="#">
                                            <div class="link-item-content">
                                                <h4>腾讯云</h4>
                                                <p>提供领先的云产品与云服务，辅助企业走向数字化和全球化。</p>
                                            </div>
                                            <i class="icon-more"></i>
                                        </a>
                                    </li>
                                    <li class="item-2-3">
                                        <a href="#">
                                            <div class="link-item-content">
                                                <h4>智慧产业</h4>
                                                <p>通过云、AI、大数据分析、安全、支付、小程序、LBS等互联网前沿技术和产品，打造智慧产业方案，助力产业数字化升级。</p>
                                            </div>
                                            <i class="icon-more"></i>
                                        </a>
                                    </li>
                                </ul>
                            </transition>
                            <transition @enter="linkContentEnter">
                                <ul v-show="linkActiveTab == 2" class="link-content-list">
                                    <li class="item-3-1">
                                        <a href="#">
                                            <div class="link-item-content">
                                                <h4>人工智能</h4>
                                                <p>运用多种技术资产，提升人工智能实力，惠及人类和世界。</p>
                                            </div>
                                            <i class="icon-more"></i>
                                        </a>
                                    </li>
                                    <li class="item-3-2">
                                        <a href="#">
                                            <div class="link-item-content">
                                                <h4>物联网</h4>
                                                <p>通过腾讯云物联网，致力提供IoT全栈产品和解决方案。</p>
                                            </div>
                                            <i class="icon-more"></i>
                                        </a>
                                    </li>
                                    <li class="item-3-3">
                                        <a href="#">
                                            <div class="link-item-content">
                                                <h4>多媒体</h4>
                                                <p>腾讯多媒体实验室专注音视频通信技术的前瞻性研究。</p>
                                            </div>
                                            <i class="icon-more"></i>
                                        </a>
                                    </li>
                                    <li class="item-3-4">
                                        <a href="#">
                                            <div class="link-item-content">
                                                <h4>腾讯探索</h4>
                                                <p>携手合作伙伴探索未来和相关技术，帮助解决全球在食物、能源和水源方面的挑战。</p>
                                            </div>
                                            <i class="icon-more"></i>
                                        </a>
                                    </li>
                                </ul>
                            </transition>
                        </div>
                    </div>
                </div>
                <div class="welfare">
                    <div class="welfare-carousel">
                        <carousel :ui="ui.ClipCarousel" :data="welfareList" :duration="4000"></carousel>
                    </div>
                    <div class="welfare-content">
                        <h3>
                            连接
                            <br>
                            责任与信任
                        </h3>
                        <p>聚合微小善行，以科技让世界更美好</p>
                        <a href="#">
                            <i></i>
                        </a>
                    </div>
                </div>
                <div class="develop">
                    <div class="develop-content">
                        <h3>
                            连接
                            <br>
                            人才与发展
                        </h3>
                        <p>激发活力，助力成长</p>
                        <a href="#">
                            <i></i>
                        </a>
                    </div>
                    <carousel class="develop-carousel" :ui="ui.FullCarousel" :data="developList" :duration="4200"></carousel>
                </div>
            </main>
            <footer>
                <div class="footer-inner">
                    <div class="focus-us">
                        <h3>关注我们</h3>
                        <ul class="focus-list">
                            <li>
                                <a href="javascript:void(0)">
                                    <i class="wechat-icon" @mouseenter="qrcodeImgShow = true" @mouseleave="qrcodeImgShow = false"></i>
                                    <transition
                                        @enter="qrcodeImgEnter"
                                        @leave="qrcodeImgLeave"
                                    >
                                        <img v-show="qrcodeImgShow" class="wechat-qrcode" src="https://www.tencent.com/img/index/wechat-code.jpg" alt="企业微信二维码">
                                    </transition>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:void(0)">
                                    <i class="weibo-icon"></i>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:void(0)">
                                    <i class="twitter-icon"></i>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:void(0)">
                                    <i class="in-icon"></i>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="more-info">
                        <div class="nav">
                            <div class="join-us" :class="{ 'nav-expand': joinUsExpand }">
                                <div class="nav-title" @click="expandFooterNav(1)">
                                    <h3>加入我们</h3>
                                    <i></i>
                                </div>
                                <ul class="nav-list">
                                    <li>
                                        <a target="_blank" href="#">社会招聘</a>
                                    </li>
                                    <li>
                                        <a target="_blank" href="#">校园招聘</a>
                                    </li>
                                    <li>
                                        <a target="_blank" href="#">国际招聘</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="contact-us" :class="{ 'nav-expand': contactUsExpand }">
                                <div class="nav-title" @click="expandFooterNav(2)">
                                    <h3>联系我们</h3>
                                    <i></i>
                                </div>
                                <ul class="nav-list">
                                    <li>
                                        <a target="_blank" href="#">客户服务</a>
                                    </li>
                                    <li>
                                        <a target="_blank" href="#">合作洽谈</a>
                                    </li>
                                    <li>
                                        <a target="_blank" href="#">腾讯采购</a>
                                    </li>
                                    <li>
                                        <a target="_blank" href="#">媒体及投资者</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="legal-info" :class="{ 'nav-expand': legalInfoExpand }">
                                <div class="nav-title" @click="expandFooterNav(3)">
                                    <h3>法律信息</h3>
                                    <i></i>
                                </div>
                                <ul class="nav-list">
                                    <li>
                                        <a target="_blank" href="#">服务协议</a>
                                    </li>
                                    <li>
                                        <a target="_blank" href="#">隐私政策</a>
                                    </li>
                                    <li>
                                        <a target="_blank" href="#">知识产权</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="logo">
                            <img src="https://www.tencent.com/img/index/tencent_logo.png" alt="Tencent腾讯">
                        </div>
                    </div>
                    <div class="outer-links">
                        <ul>
                            <li>
                                <a target="_blank" href="#">法律声明</a>
                            </li>
                            <li>
                                <a target="_blank" href="#">阳光准则</a>
                            </li>
                            <li>
                                <a target="_blank" href="#">网站地图</a>
                            </li>
                            <li>
                                <a target="_blank" href="#">粤网文【2017】6138-1456号</a>
                            </li>
                        </ul>
                        <p class="copyright">
                            Copyright © 1998 - 2019 Tencent. All Rights Reserved.
                            <br class="break-line">
                            腾讯公司 版权所有
                        </p>
                    </div>
                </div>
            </footer>
        </div>
    </div>
</body>
</html>